<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .expand-transition {
            transition: all .3s ease;
            height: 30px;
            padding: 10px;
            background-color: #eee;
            overflow: hidden;
        }

        .expand-enter, .expand-leave {
            height: 0;
            padding: 0 10px;
            opacity: 0;
        }


        .bounce-transition {
            display: inline-block; /* 否则 scale 动画不起作用 */
        }
        .bounce-enter {
            animation: bounce-in .5s;
        }
        .bounce-leave {
            animation: bounce-out .5s;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes bounce-out {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(0);
            }
        }
    </style>
    <script src="../vendor/vue1.0.26.js"></script>
</head>

<body>
<!--
    当插入或删除带有过渡的元素时，Vue 将：

    尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了，将在过渡的不同阶段调用相应的钩子。

    自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。

    如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。
-->

<!--
    transition 特性可以与下面资源一起用：
    v-if
    v-show
    v-for （只在插入和删除时触发，使用 vue-animated-list 插件）
    动态组件 （介绍见组件）
    在组件的根节点上，并且被 Vue 实例 DOM 方法（如 vm.$appendTo(el)）触发。
-->

<div id="app">
    <div v-if="show" transition="expand">Hello</div>
    <button @click="switchShow">显示</button>
</div>

<!--
    类名的添加和切换取决于 transition 特性的值。比如 transition="fade"，会有三个 CSS 类名：

    .fade-transition 始终保留在元素上。

    .fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。

    .fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

    如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave。
-->
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show:false
        },
        methods:{
            switchShow:function () {
                this.show=!this.show
            }
        }
    })

    Vue.transition('expand', {

        beforeEnter: function (el) {
            el.textContent = 'beforeEnter'
        },
        enter: function (el) {
            el.textContent = 'enter'
        },
        afterEnter: function (el) {
            el.textContent = 'afterEnter'
        },
        enterCancelled: function (el) {
            // handle cancellation
        },

        beforeLeave: function (el) {
            el.textContent = 'beforeLeave'
        },
        leave: function (el) {
            el.textContent = 'leave'
        },
        afterLeave: function (el) {
            el.textContent = 'afterLeave'
        },
        leaveCancelled: function (el) {
            // handle cancellation
        }
    })
</script>

<div id="app2">
    <div v-show="show" class="animated" transition="nb">bounce.</div>
    <button @click="bounce">bounce</button>
    <!--
        当 show 属性改变时，Vue.js 将相应地插入或删除 <div> 元素，按照如下规则改变过渡的 CSS 类名：

        如果 show 变为 false，Vue.js 将：

        调用 beforeLeave 钩子；
        添加 v-leave 类名到元素上以触发过渡；
        调用 leave 钩子；
        等待过渡结束（监听 transitionend 事件）；
        从 DOM 中删除元素并删除 v-leave 类名；
        调用 afterLeave 钩子。
        如果 show 变为 true，Vue.js 将：

        调用 beforeEnter 钩子；
        添加 v-enter 类名到元素上；
        把它插入 DOM；
        调用 enter 钩子；
        强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
        等待过渡结束；
        调用 afterEnter 钩子。
    -->
</div>
<script>

    //注册动画要在Vue对象构造之前
    Vue.transition("nb",{
        enterClass:"bounceInLeft",
        leaveClass:"bounceOutRight"
    })
    var vm=new Vue({
        el:"#app2",
        data:{
            show:false
        },
        methods:{
            bounce:function () {
                this.show=!this.show
            }
        }
    })
</script>

<div id="app3">
    <span v-show="show" transition="bounce">调皮</span>
    <button @click="switchShow">点我</button>
</div>
<script>
    var vm=new Vue({
        el:"#app3",
        data:{
            show:false
        },
        methods:{
            switchShow:function () {
                this.show=!this.show
            }
        }
    })
</script>
</body>
</html>